<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./vue.js"></script>
</head>

<body>
    <div id="app">
        <!-- {{firstName}}----{{endName}} -->
        <input type="text" v-model="firstName">
        <input type="text" v-model="endName">
        <!-- 当页面中需要使用一个数据,这个数据是由其他数据计算来的 -->
        <!-- 1.使用插值语法直接计算,可读性差,而且队友多处使用的话,观看起来不美观 -->
        <p @click="A++">{{outName}}</p>
    </div>
    <script>
        Vue.config.productionTip = false;
        const vm = new Vue({
            el: "#app",
            data() {
                return {
                    firstName: "张",
                    endName: '三',
                    A: 52
                };
            },
            // 数据的计算属性,对于需要拼接的数据,vue提供了一种方式
            computed: {
                // 数据的计算属性
                // 函数名即为标识符,由vm实例代理,在插值语法中直接使用即可
                outName() { //每当其中参与计算的数值变化时,就会触发当前函数执行,计算出新的值,然后返回,并重新渲染页面加载最新的值
                    // 使用return返回计算完成后的值
                    console.log(this);
                    let s = this.A
                    return this.firstName + this.endName
                }
            }
        });
    </script>
</body>

</html>